<template>
  <div class="set-tag">
    <div class="header text-center mb-10">
      <p class="fz-30">请为客户设置标签</p>
      <p class="mt-10 fz-20" style="color: #cdcdcd">添加标签后方便以后沟通</p>
    </div>
    <div class="content bg-cf">
      <div class="plr-15 title flex flex-align-center">
        <span class="ml-10">新老客户</span>
      </div>
      <div class="flex flex-aro ptb-20 clients">
        <p
          class="clients-box"
          :class="clientsIndex == index ? 'active' : ''"
          v-for="(item, index) in clients"
          :key="index"
          @click="change(index, item)"
        >
          {{ item.text }}
        </p>
      </div>

      <div class="plr-15 pt-30 title flex flex-align-center">
        <span class="fz-16 ml-5">是否开处方</span>
      </div>
      <div
        class="flex flex-jus flex-wrap ptb-20 clients"
        style="padding-left: 30px"
      >
        <p
          class="clients-box mb-22"
          :class="prescriptionIndex == index ? 'active' : ''"
          v-for="(item, index) in prescription"
          :key="index"
          @click="change1(index, item)"
        >
          {{ item.text }}
        </p>
      </div>
      <div class="footer cp" @click="ajaxPostData">保存客户标签信息</div>
    </div>
  </div>
</template>

<script lang="ts">
interface citem {
  text: string
}
import { defineComponent, ref } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import { DoctorDoctorSetTab } from '@/service/api/doctor'
import { ElMessage } from 'element-plus'
export default defineComponent({
  name: 'setTag',

  setup() {
    const store = useStore()
    const route = useRoute()
    console.log(route.params)

    const i = route.params.i as string | number
    let clientsIndex = ref(-1)
    let prescriptionIndex = ref(-1)
    let clients = [
      {
        text: '新客户'
      },
      {
        text: '老客户'
      }
    ]
    let prescription = [
      {
        text: '已开处方药'
      },
      {
        text: '未开'
      },
      {
        text: '有机会开'
      },
      {
        text: '没机会开'
      }
    ]
    let clientsData: citem[] = []
    let prescriData: citem[] = []
    /**
     * 选中标签
     */
    const change = (index: number, item: citem) => {
      clientsIndex.value = index
      clientsData.push(item)
    }
    const change1 = (index: number, item: citem) => {
      prescriptionIndex.value = index
      prescriData.push(item)
    }
    /**
     * 发送后台
     */
    const ajaxPostData = () => {
      let postData = {
        doctor_id: store.state.user.userInfo.id,
        user_id: store.state.user.clientInfo.patient_id,
        uniacid: i,
        tab: [[...clientsData], [...prescriData]]
      }
      DoctorDoctorSetTab(postData).then((res) => {
        console.log(res)
        if (res.code == 200) {
          ElMessage.success('设置成功！')
        }
      })
    }
    return {
      clients,
      prescription,
      clientsIndex,
      prescriptionIndex,
      change,
      change1,
      ajaxPostData
    }
  }
})
</script>

<style lang="less" scoped>
.set-tag {
  background: #f9f9fb;
  padding: 35px 30px;
  position: relative;
  .header {
    padding: 65px 0 48px 0;
    background-color: #fff;
  }
  .content {
    box-sizing: border-box;
    margin: 0 auto;
    padding: 0 20px 88px;
    background-color: #fff;
    border-radius: 16px;
  }
  .title {
    padding-top: 61px;
    padding-bottom: 46px;
    font-size: 27px;
  }
  .title::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    background-color: #5198fe;
    border-radius: 100%;
  }
  .clients {
    padding-bottom: 30px;
    border-bottom: 1px solid #f0f0f0;
  }
  .clients-box {
    cursor: pointer;
    font-size: 14px;
    color: #cdcdcd;
    border-radius: 8px;
    padding: 10px 23px;
    border: 1px solid #f0f0f0;
  }
  .active {
    color: #48b4ff;
    border: none;
    background-color: rgba(72, 180, 255, 0.1);
  }
  .footer {
    // position: absolute;
    // left: 50%;
    // transform: translate(-50%);
    margin: 134px auto 0;
    width: 326px;
    height: 46px;
    border-radius: 23px;
    background: #5198fe;
    line-height: 46px;
    text-align: center;
    color: #fff;
    font-size: 16px;
  }
}
</style>
